<template>
  <div class="order">
    <el-alert
      title="只有已付款和未受理的订单才能进行审核操作;拒绝受理或拒绝接单或已取消的订单能删除！"
      type="warning">
    </el-alert>
    <!-- 订单查询表单-->
    <order-search-form @clickSubmit="clickSubmit" @resetClick="resetClick"></order-search-form>
<!--    导出功能-->
    <el-row>
      <el-col>
        <el-button type="primary" @click="exportExcel" size="mini">导出</el-button>
      </el-col>
    </el-row>
    <!--    订单列表-->
    <el-table
      :data="showTableData"
      stripe
      style="width: 100%"
      size="mini" id="orderTable">
      <el-table-column
        type="index"
        width="50"
        label="#">
      </el-table-column>
      <el-table-column
        prop="or_id"
        label="订单号">
      </el-table-column>
      <el-table-column
        prop="ber_id"
        label="采买用户ID">
      </el-table-column>
      <el-table-column
        prop="ser_id"
        label="服务商ID">
      </el-table-column>
      <el-table-column
        prop="or_product"
        label="产品名称">
      </el-table-column>
      <el-table-column
        prop="or_money"
        label="交易金额">
      </el-table-column>
      <el-table-column
        prop="or_kind"
        label="服务类型">
        <template slot-scope="scope">
          <span v-if="scope.row.or_kind == 1">公司服务</span>
          <span  v-else-if="scope.row.or_kind ==2">资质证照</span>
          <span  v-else-if="scope.row.or_kind == 3">法律咨询</span>
          <span  v-else-if="scope.row.or_kind == 4">法律文书</span>
          <span v-else>知识产权</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="or_type"
        label="订单状态">
        <template slot-scope="scope">
          <span v-if="scope.row.or_type == 0">未接单</span>
          <span  v-else-if="scope.row.or_type ==1">已接单</span>
          <span  v-else-if="scope.row.or_type == 2">拒绝接单</span>
          <span  v-else-if="scope.row.or_type == 3">已完成</span>
          <span  v-else-if="scope.row.or_type == 4">确认完成</span>
          <span v-else>已取消</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="or_accept"
        label="受理状态">
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.or_accept==1">已受理</el-tag>
          <el-tag type="error" v-else-if="scope.row.or_accept==0">未受理</el-tag>
          <el-tag type="info" v-else>拒绝受理</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="or_pay"
        label="是否付款">
        <template slot-scope="scope">
          <span v-if="scope.row.or_pay == 0">未付款</span>
          <span v-else>付款</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="or_process"
        label="下一步流程">
      </el-table-column>
      <el-table-column
        width="135"
        prop="or_time"
        label="下单时间"
        sortable>
      </el-table-column>
      <el-table-column label="操作" width="145">
        <template slot-scope="scope">
<!--          已经付款和未受理才可以进行审核操作-->
          <el-button type="primary" size="mini" :disabled="!(scope.row.or_accept==0&&scope.row.or_pay==1)" @click="verify(scope.row)">审核</el-button>
          <el-button type="primary" size="mini" @click="deleteClick(scope.row)" :disabled="scope.row.or_accept!=2&&scope.row.or_type != 2&&scope.row.or_type!=5">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--      分页-->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 20, 30]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>

  <!-- 审核订单对话框 -->
    <el-dialog title="订单审核" :visible.sync="verifyDialogVisible" width="50%" >
      <el-form :model="verifyForm" label-width="100px">
        <el-form-item label="订单ID" prop="or_id">
          <el-input v-model="verifyForm.or_id" disabled></el-input>
        </el-form-item>
        <el-form-item label="产品名称" prop="or_product">
          <el-input v-model="verifyForm.or_product" disabled></el-input>
        </el-form-item>
        <el-form-item label="采买用户ID" prop="ber_id">
          <el-input v-model="verifyForm.ber_id" disabled></el-input>
        </el-form-item>
        <el-form-item label="服务商ID" prop="ser_id">
          <el-input v-model="verifyForm.ser_id" disabled></el-input>
        </el-form-item>
        <el-form-item label="服务类型" prop="or_kind">
          <el-input  v-model="verifyForm.or_kind" disabled ></el-input>
        </el-form-item>
        <el-form-item label="交易金额" prop="or_money">
          <el-input v-model="verifyForm.or_money" disabled></el-input>
        </el-form-item>
        <el-form-item label="付款状态" prop="or_pay">
          <el-input v-model="verifyForm.or_pay" disabled></el-input>
        </el-form-item>
        <el-form-item label="下单时间" prop="or_time">
          <el-input v-model="verifyForm.or_time" disabled></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="accept">受理</el-button>
          <el-button @click="refuse">拒绝</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import OrderSearchForm from "@/views/business/order/OrderSearchForm";
import {getOrderByKey,acceptOrder,notAcceptOrder,deleteOrder} from "@/network/business/order";
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
import {formatDate} from '@/common/utils'
export default {
  name: "Order",
  components: {OrderSearchForm},
  data() {
    return {
      verifyDialogVisible: false,  //审核订单的对话框
      verifyForm:{},  //审核时展示的信息
      searchForm:{   //搜索表单
        id: '',        //订单号
        kind:'',  //服务类型  1表示公司服务，2表示证照办理；3表示法律求助；4表示法律文书；5表示知识产权
        accept:'',    //受理状态(将该状态放到切换的位置)：  0未受理  1已受理  2拒绝受理
        type:'',  //订单状态 0表示未接单（默认）；1表示已接单；2表示拒绝接单；3表示已完成；4表示确认完成；5表示已取消。
        timeBeginRange:'', //开始时间string
        timeEndRange:'',  //结束时间string
        pay:'' //是否付款 0未付款 1付款
      },
      pageSizeTemp:0,  //页面大小的副本
      currentPageTemp:0,  //当前页面的副本
      currentPage: 1,
      pageSize:5,  //页面条数，默认为10条
      tableData: [],  //请求的数据
      showTableData: []
    }
  },
  computed:{
    total(){  //总条数
      return this.tableData.length;
    }
  },
  created(){
    this.getOrderFromServer();
  },
  methods:{
    //从服务器中获取
    getOrderFromServer(){
      this.currentPage = 1;
      getOrderByKey(this.searchForm).then(res=>{
        this.tableData = res.data;
        this.getTableData();
      })
    },
    //显示所有数据
    showAllData(){
      this.pageSizeTemp = this.pageSize;
      this.currentPageTemp = this.currentPage;
      this.pageSize = this.tableData.length;
      this.currentPage = 1;
      this.getTableData();
    },
    //还原当前数据
    resetData(){
      this.currentPage = this.currentPageTemp;
      this.pageSize = this.pageSizeTemp;
      this.getTableData();
    },
    //导出excel
    exportExcel(){
      this.showAllData();
      this.$nextTick(function(){
        //关联节点
        let wb = XLSX.utils.table_to_book(document.querySelector("#orderTable"));
        let wbOut = XLSX.write(wb,{bookType:'xlsx', bookSST:true, type:'array'});
        try{
          let time = formatDate(new Date(), "yyyy-MM-dd");
          FileSaver.saveAs(new Blob([wbOut],{type:'application/octet-stream'}),`${time}-订单信息.xlsx`);
        }catch (e){
          if(typeof console !== 'undefined'){
            console.log(e,wbOut);
          }
        }
        //表格还原
        this.resetData();
        return wbOut;
      })
    },
    //删除订单
    deleteClick(order){
      this.$confirm(`${order.or_id}订单会被永久删除,是否继续?`,'提示',{
        confirmButtonText:'确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(()=>{
        deleteOrder(order.or_id).then(res=>{
          console.log(res);
          if(res.data.status==200){
            this.$message.success(`${order.or_id}订单删除成功！`);
            this.getOrderFromServer();
          }else{
            this.$message.error(`${order.or_id}订单删除失败,请重新操作！`);
          }
        })
      }).catch(()=>{
        return this.$message('已取消删除！');
      })
    },
    //将订单转换成要展示的信息
    changeOrderToVerify(order){
      const kind ={
        1: '公司服务',
        2: '资质证照',
        3: '法律咨询',
        4: '法律文书',
        5: '知识产权'
      };
      this.verifyForm.or_id = order.or_id;
      this.verifyForm.ber_id = order.ber_id;
      this.verifyForm.ser_id = order.ser_id;
      this.verifyForm.or_time = order.or_time;
      this.verifyForm.or_product = order.or_product;
      this.verifyForm.or_money = order.or_money;
      if(order.or_pay==0){
        this.verifyForm.or_pay = '未付款';
      }else{
        this.verifyForm.or_pay = '已付款';
      }
      this.verifyForm.or_kind = kind[order.or_kind];
    },
    //审核
    verify(order){
      this.verifyDialogVisible = true;
      this.changeOrderToVerify(order); //转换订单信息
    },
    //受理
    accept(){
      acceptOrder(this.verifyForm.or_id).then(res=>{
        if(res.data.status==200){  //受理成功
          this.$message.success(`订单${this.verifyForm.or_id}受理成功！`);
          this.verifyDialogVisible = false;
          this.getOrderFromServer();
        }else if(res.data.status==300){
          this.$message.error(`订单${this.verifyForm.or_id}未付款，受理失败！`);
        } else{
          this.$message.error(`订单${this.verifyForm.or_id}受理失败，请重新操作！`);
        }
      })
    },
    //拒绝受理
    refuse(){
      this.$confirm(`订单${this.verifyForm.or_id}将拒绝受理,是否继续?`,'提示',{
        confirmButtonText:'确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(()=>{
        notAcceptOrder(this.verifyForm.or_id).then(res=>{
          console.log(res);
          if(res.data.status==200){
            this.$message.success(`订单${this.verifyForm.or_id}拒绝受理成功！`);
            this.verifyDialogVisible = false;
            this.getOrderFromServer();
          }
          if(res.data.status==500){
            this.$message.error(`订单${this.verifyForm.or_id}拒绝受理失败，请重新操作！`)
          }
        }).catch(()=>{
          return this.$message('已取消！');
        })
      })
    },
    //点击搜索
    clickSubmit(search){
      this.searchForm = search;
      this.getOrderFromServer();
    },
    //点击重置
    resetClick(search){
      this.searchForm = search;
      this.getOrderFromServer();
    },

    //分页相关
    handleSizeChange(val){  //每页条数变化
      this.pageSize =val;
      this.getTableData();
    },
    handleCurrentChange(val){  //当前页发生改变
      this.currentPage = val;
      this.getTableData();
    },
    getTableData(){ //获取数据
      let startIndex = (this.currentPage-1)*this.pageSize;
      let endIndex = startIndex+this.pageSize > this.tableData.length ? this.tableData.length : startIndex+this.pageSize;
      this.showTableData = this.tableData.slice(startIndex,endIndex);
    },
  }
}
</script>

<style scoped>
.el-row{
  margin-top:10px;
}
.order{
  height: 100%;
}

</style>
